import { ref, reactive, createVNode } from "vue";
// 导入时间处理库
import moment from "moment";
// 导入提示方法
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
// 导入回显，编辑接口
import { editEchoCarousel, editCarousel } from "@/api/carouselAPI";

export const useEditCarousel = (getCarouselData) => {
  // 编辑轮播图框显示状态
  const editVisible = ref(false);

  // 表单内容
  const editModel = reactive({
    status: "展示中",
    operate_place: "",
    datetime: undefined,
    swipe_image: [],
    swipe_image_src: "",
  });

  // 定义存储未重新赋值的图片列表
  const save_swipe_image = ref([]);

  // 定义轮播图id
  const carouselId = ref(null);

  // 点击编辑轮播图显示编辑用户框
  const handleShowEditModal = (id) => {
    // 存储轮播图id
    carouselId.value = id;
    // 显示模态框
    editVisible.value = true;
    // 参数
    const query = {
      id,
    };
    // 发送请求获取回显数据
    editEchoCarousel(query)
      .then((res) => {
        const { data } = res;
        editModel.swipe_image_src = data.swipe_image;
        editModel.status = data.status;
        editModel.operate_place = data.operate_place;
        editModel.datetime = [
          moment(
            moment(data.start_time).format("YYYY-MM-DD HH:mm:ss"),
            "YYYY-MM-DD HH:mm:ss"
          ),
          moment(
            moment(data.end_time).format("YYYY-MM-DD HH:mm:ss"),
            "YYYY-MM-DD HH:mm:ss"
          ),
        ];
        editModel.swipe_image = [
          { uid: data.swipe_image, status: "done", url: data.swipe_image },
        ];
      })
      .catch((error) => {
        throw new Error(error);
      });
  };

  // 表单ref
  const editFormRef = ref(null);

  // 关闭模态框
  const editCloselModal = () => {
    editFormRef.value.resetFields();
    editModel.swipe_image_src = "";
    save_swipe_image.value = [];
  };

  // 点击确认
  const handleEditOk = () => {
    editFormRef.value
      .validate()
      .then((res) => {
        // 二次确认
        Modal.confirm({
          title: "确认提示",
          icon: createVNode(ExclamationCircleOutlined),
          content: "您是否确认编辑用户",
          okText: "确认",
          cancelText: "取消",
          onOk() {
            const { status, operate_place, datetime } = res;
            // 参数
            const params = {
              id: carouselId.value,
              status,
              operate_place,
              start_time: moment(datetime[0]).format("YYYY-MM-DD HH:mm:ss"),
              end_time: moment(datetime[1]).format("YYYY-MM-DD HH:mm:ss"),
              swipe_image: editModel.swipe_image_src,
            };
            editCarousel(params)
              .then((res) => {
                if (res.status === 205) {
                  message.info(res.msg);
                }
                if (res.status === 200) {
                  message.success(res.msg);
                  editVisible.value = false;
                  // 重新获取数据渲染
                  getCarouselData();
                }
              })
              .catch((error) => {
                throw new Error(error);
              });
          },
          onCancel() {
            message.info("已取消");
          },
        });
      })
      .catch((error) => {
        throw new Error(error);
      });
  };

  return {
    editVisible,
    editModel,
    save_swipe_image,
    handleShowEditModal,
    editFormRef,
    editCloselModal,
    handleEditOk,
  };
};
